<template>
    <p>Home</p>
    <van-button type="primary">按钮</van-button>

    <p>组合式api写法</p>
    <p>count:{{ count }}</p>
    <p>count:{{ test }}</p>

    <p>reactive写法=============</p>
    <p>obj:{{ obj }}</p>
    <p>obj.name:{{ obj.name }}</p>
    <p>arr:{{ arr }}</p>

    <p>computed</p>
    <p>countAddFive:{{ countAddFive }}</p>

    <p>methods</p>
    <button @click="countAddOne">count+1</button>
    <button @click="countAddTwo">count+2</button>
    <button @click="updateObj">更新obj</button>


    <p>组件</p>
    <Son :foo="obj.name" :age="obj.age" />
</template>

<script>
import { ref, reactive, computed, watch } from 'vue'
import Son from './Son.vue'
export default {
    components: {
        Son
    },
    setup() {
        const count = ref(0)
        const test = ref('hello world')

        console.log(count.value);
        count.value = 1
        const obj = reactive({
            name: 'ton',
            age: 12
        })
        const arr = reactive([1, 2, 3, 4])

        const countAddFive = computed(() => {
            return count.value + 5
        })

        function countAddOne() {
            count.value++
        }
        const countAddTwo = () => {
            count.value += 2
        }
        const updateObj = () => {
            updateObjName()
        }
        const updateObjName = () => {
            obj.name = "yazhen"
        }

        //watch
        watch(count, (newVal, oldVal) => {
            console.log('count触发了');
            console.log('newVal', newVal);
            console.log('oldVal', oldVal);
        })
        watch(obj, (newVal, oldVal) => {
            console.log('obj触发了');
            console.log('newVal', newVal);
            console.log('oldVal', oldVal);
        })
        watch(() => obj.name, (newVal, oldVal) => {
            console.log('obj.name触发了');
            console.log('newVal', newVal);
            console.log('oldVal', oldVal);
        })
        return {
            count,
            test,
            obj,
            arr,
            countAddFive,
            countAddOne,
            countAddTwo,
            updateObj
        }
    }
}
</script>